<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="取消项目" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="xmqxRuleForm" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="取消类型" borderBottom @click="cascaderFunc('cancelTypeShow')">
								<u--input
									placeholder="选择取消类型"
									inputAlign="left"
									v-model="xmqxRuleForm.cancel_type_name"
									border="none"
									color="#000000"
									fontSize="28rpx"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									suffixIconStyle="color: #727272;font-size:24rpx;font-weight:500;"
									placeholderStyle="font-weight: 400;font-size: 28rpx;color: #B1B1B0;"
								></u--input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="取消原因" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="xmqxRuleForm.remark"
									border="none"
									placeholder="取消原因"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="取消附件 (.zip,.ppt,.ppsx,.pptx,.psd)">
								<file-upload :typeList="['zip', 'ppt', 'ppsx', 'pptx', 'psd']" @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
			<!-- 整改区域 -->
			<u-picker
				ref="cancelTypeShow"
				title="整改区域"
				closeOnClickOverlay
				:show="cancelTypeShow"
				:columns="[cancelTypelist]"
				@confirm="confirmFunc($event, 'cancelTypeShow')"
				@cancel="closeFunc('cancelTypeShow')"
				@close="closeFunc('cancelTypeShow')"
				keyName="label"
			></u-picker>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			xmqxRuleForm: {
				cancel_type: '',
				cancel_type_name: '',
				remark: '',
				cancel_file: [],
				project_id: ''
			},
			cancelTypeShow: false, //取消类型弹窗
			cancelTypelist: [
				{
					label: '价格原因',
					value: 1
				},
				{
					label: '工期原因',
					value: 2
				},
				{
					label: '客户拒绝沟通',
					value: 3
				},
				{
					label: '客户自行施工',
					value: 4
				},
				{
					label: '不可抗力因素',
					value: 5
				},
				{
					label: '前施工问题影响',
					value: 6
				},
				{
					label: '客户关联',
					value: 7
				},
				{
					label: '其他原因',
					value: 8
				}
			] //取消类型列表
		};
	},
	onLoad(option) {
		this.xmqxRuleForm.project_id = option.id;
	},
	methods: {
		// picker 弹窗打开
		cascaderFunc(type, index) {
			switch (type) {
				case 'cancelTypeShow':
					this.cancelTypeShow = true;
					break;

				default:
			}
		},
		// picker 弹窗关闭
		closeFunc(type) {
			switch (type) {
				case 'cancelTypeShow':
					this.cancelTypeShow = false;
					break;

				default:
			}
		},
		// picker 弹窗选择
		confirmFunc(e, type) {
			console.log(e);
			switch (type) {
				case 'cancelTypeShow':
					this.xmqxRuleForm.cancel_type_name = e.value[0].label;
					this.xmqxRuleForm.cancel_type = e.value[0].value;
					this.cancelTypeShow = false;
					break;
				default:
			}
		},
		afterRead(files) {
			files.map((item) => {
				let obj = {
					url: item.url
				};
				this.xmqxRuleForm.cancel_file.push(obj);
			});
		},
		deletePic(e) {
			this.xmqxRuleForm.cancel_file.splice(e.index, 1);
		},
		async submit() {
			let xmqxRuleForm = this.xmqxRuleForm;
			if (!xmqxRuleForm.cancel_type_name) {
				uni.showToast({
					title: '请选择取消类型',
					icon: 'error'
				});
				return;
			}
			if (!xmqxRuleForm.remark) {
				uni.showToast({
					title: '请输入取消原因',
					icon: 'error'
				});
				return;
			}
			let data = {
				cancel_type: xmqxRuleForm.cancel_type,
				remark: xmqxRuleForm.remark,
				project_id: xmqxRuleForm.project_id
			};
			if (xmqxRuleForm.cancel_file.length) {
				uni.showLoading({
					title: '文件上传中',
					mask: true
				});
				let cancel_file = await this.$upload(xmqxRuleForm.cancel_file);
				uni.hideLoading();
				data.cancel_file = cancel_file.arrResult;
			}
			this.projectCancellation(data);
		},
		projectCancellation(data) {
			uni.showLoading({
				title: '信息提交中',
				mask: true
			});
			this.$Apipc.projectCancellation(data).then((res) => {
				console.log(res, '取消项目');
				uni.hideLoading();
				if (res.code == 200) {
					setTimeout(() => {
						var currentPages = getCurrentPages()[getCurrentPages().length - 2]
						if (currentPages) {
							uni.navigateBack({
								delta: 1
							});
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							});
						}
					}, 500);
				}
				uni.showToast({
					title: res.code == 200 ? '操作成功' : res.message,
					icon: res.code == 200 ? 'success' : 'error'
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
